<template>
  <div class="securityCenter">
    <van-nav-bar
        title="安全中心"
        left-text="返回"
        left-arrow
        :placeholder="true"
        :safe-area-inset-top="true"
        @click-left="$router.back()"
    />
    <div class="blue"></div>
    <!--  地址列表  -->
    <div class="container">
      <van-cell-group inset>
        <van-cell title="修改密码" is-link @click="changePw=true"/>
        <van-cell title="注销账号" is-link @click="logoutAccount"/>
      </van-cell-group>
    </div>
    <div class="logout">
      <van-button round block type="info" @click="logout">退出登录</van-button>
    </div>

    <!--    修改密码弹出层-->
    <van-popup v-model="changePw" position="bottom">
      <div class="changePw">
        <div class="title">
          <div>修改密码</div>
          <div>
            <van-icon name="cross" size="25" color="#999"/>
          </div>
        </div>
        <van-form @submit="updatePassword">
          <van-field
              v-model="changePassword.lastPassword"
              type="password"
              name="旧密码"
              label="旧密码"
              @click-right-icon="isRegisterPassword = !isRegisterPassword"
              :type="isRegisterPassword === true ? 'text' : 'password'"
              :right-icon="isRegisterPassword === true ? 'eye-o' : 'closed-eye'"
              placeholder="旧密码(首字母必须为字母)"
              :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
              v-model="changePassword.newPassword"
              type="password"
              name="新密码"
              label="新密码"
              placeholder="新密码(首字母必须为字母)"
              @click-right-icon="isRegisterNewPassword = !isRegisterNewPassword"
              :type="isRegisterNewPassword === true ? 'text' : 'password'"
              :right-icon="isRegisterNewPassword === true ? 'eye-o' : 'closed-eye'"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </div>

    </van-popup>

  </div>
</template>

<script>

import {destroyAccount, logout, updatePassword} from "@/api/my";

export default {
  name: "securityCenter",
  data() {
    return {
      collectData: [],
      tokenString: '',
      isPassword: false, //控制密码的显示
      isRegisterPassword: false,
      isRegisterNewPassword: false,
      changePw: false, //修改密码弹出框显示
      changePassword: {
        lastPassword: "",
        newPassword: ""
      }
    }
  },
  created() {
    this.tokenString = this.$cookies.get("tokenString")
  },
  methods: {
    // 修改密码接口
    updatePassword(value) {
      let self = this;
      let data = {
        appkey: self.appkey,
        tokenString: self.tokenString,
        password: self.changePassword.newPassword,
        oldPassword: self.changePassword.lastPassword
      }
      updatePassword(data).then(res => {
        if (res.data.code === "E003") {
          self.$toast.fail({message: res.data.msg, duration: 1500});
        } else if (res.data.code === "E001") {
          self.$toast.success({message: "修改密码成功，请重新登录！", duration: 1500});
          self.$router.push('/login');
        } else {
          self.$toast.fail({message: "状态异常,请重新登录！", duration: 1500});
          self.$router.push('/login');
        }
      })
      this.changePw = false

    },
    //   注销转换接口
    logoutAccount() {
      let self = this;
      let data = {
        appkey: self.appkey,
        tokenString: self.tokenString
      }
      this.$dialog.confirm({
        title: "注销账号",
        message: "是否确定注销账号，一旦注销无法恢复！"
      }).then(res => {
        destroyAccount(data).then(res => {
          if (res.data.code === "G001") {
            self.$toast.success({message: "注销账号成功！", duration: 3000});
            self.$router.push('/')
          } else {
            self.$toast.fail({message: res.data.msg, duration: 3000});
          }
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    logout() {
      let self = this;
      let data = {
        appkey: self.appkey,
        tokenString: self.tokenString
      }
      logout(data).then(res => {
        console.log(res)
        if (res.data.code === "F001") {
          self.$toast.success({message: "退出登录成功！", duration: 3000});
          self.$router.push('/')
        } else {
          self.$toast.fail({message: res.data.msg, duration: 3000});
          self.$router.push('/')
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.securityCenter {
  .blue {
    background: #0c34ba;
    width: 100%;
    height: 100px;
  }

  .container {
    margin: -20px 5px 0 5px;
    border-radius: 3%;
  }

  .logout {
    margin: 100px 10px;
  }

}

.changePw {
  .title {
    margin: 10px 10px;
    display: flex;
    justify-content: space-between;
    font-size: 17px;
  }

  .input {
    padding: 30px 0;
    font-size: 18px;
  }

  .bom {
    margin: 10px;

    button {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border: none;
      background: #0c34ba;
      color: white;
      border-radius: 15px;
    }


  }
}

/deep/ .van-button--info {
  color: #fff;
  background-color: #0c34ba;
  border: 1px solid #0c34ba;
}
</style>
